<template>
  <div class="detail-box">
    <van-nav-bar
      title="商品详情"
    />
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" class="swipe-img" />
      </van-swipe-item>
    </van-swipe>
    <div class="content">
      <p class="content-title">
        法国碧欧泉法国碧欧泉法国碧欧泉法国碧欧泉法国碧欧泉法国碧欧泉法国碧欧泉法国碧欧泉!
      </p>
      <div class="content-price">
        <div class="price-left">
          <span class="price-now">¥375</span>
          <span class="price-delete">¥675</span>
        </div>
        <p class="price-right">已售2333</p>
      </div>
      <div class="van-hairline--bottom"></div>
      <div class="icons">
        <div class="icons-item">
          <van-icon name="checked" />
          正品保障
        </div>
        <div class="icons-item">
          <van-icon name="checked" />
          7天无忧退货
        </div>
        <div class="icons-item">
          <van-icon name="checked" />
          满88包邮
        </div>
      </div>
    </div>

    <div class="desc">
      <span class="desc-title">
        <span>Smart Int 推荐</span>
      </span>
      <div class="desc-content">
        参加人员须在24小时之内进入个人中心参加人员须在24小时之内进入个人中心参加人员须在24小时之内进入个人中心参加人员须在24小时之内进入个人中心参加人员须在24小时之内进入个人中心参加人员须在24小时之内进入个人中心参加人员须在24小时之内进入个人中心参加人员须在24小时之内进入个人中心
      </div>
    </div>

    <div class="desc">
      <span class="desc-title">
        <span>优秀试用报告</span>
      </span>
      <div class="desc-scroll">
        <div class="desc-item">
          <img src="../../assets/item.jpg" class="desc-item-img">
          <div class="desc-item-title">
            <span>法国碧欧泉法国碧欧泉法国碧欧泉法国碧欧泉法国碧欧泉法国碧欧泉法国碧欧泉法国!</span>
            <div class="desc-item-user">
              <img src="../../assets/item.jpg" class="desc-item-user-img">
              <span class="desc-item-name">AAAA</span>
            </div>
          </div>
        </div>
        
        <div class="desc-item">
          <img src="../../assets/item.jpg" class="desc-item-img">
          <div class="desc-item-title">
            <span>法国碧欧泉法国碧欧泉法国碧欧泉法国碧欧泉法国碧欧泉法国碧欧泉法国碧欧泉法国!</span>
            <div class="desc-item-user">
              <img src="../../assets/item.jpg" class="desc-item-user-img">
              <span class="desc-item-name">AAAA</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="desc">
      <span class="desc-title">
        <span>商品介绍</span>
      </span>
      <div class="desc-pro">
        <img src="../../assets/item.jpg" class="desc-pro-img">
        <img src="../../assets/item.jpg" class="desc-pro-img">
        <img src="../../assets/item.jpg" class="desc-pro-img">
      </div>
    </div>
  </div>
</template>

<script>
import { Button, Cell, NavBar, Swipe, SwipeItem, Icon } from 'vant';
export default {
  components: {
    [Button.name]: Button,
    [Cell.name]: Cell,
    [NavBar.name]: NavBar,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Icon.name]: Icon,
  },
  data () {
    return {
      images: [
        'https://img.yzcdn.cn/2.jpg',
        'https://img.yzcdn.cn/2.jpg'
      ]
    }
  },
  mounted() {

  },
  methods: {
  },
}
</script>

<style scoped>
p {
  margin: 0;
}
[class*=van-hairline]::after {
  border-color: #999;
}
.detail-box {
  background-color: #F7F8FA;
  height: 100vh;
  overflow: auto;
}
.van-nav-bar__title {
  font-size: 14px!important;
}
.swipe-img {
  width: 100%;
}
.content,
.desc {
  padding: 10px;
  font-size: 14px;
  background-color: #fff;
  margin-bottom: 10px;
}
.content-price {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 15px 0;
}
.price-now {
  margin-right: 5px;
  font-weight: bold;
}
.price-delete {
  font-size: 12px;
  color: #999;
  text-decoration:line-through
}
.price-right {
  font-size: 12px;
  color: #999;
}
.icons {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 0 0 0;
  font-size: 12px;
}
.icons-item {
  margin-right: 10px;
  line-height: 16px;
}
.icons .van-icon {
  top: 1px;
  margin-right: 5px;
}
.desc {
  color: #333;
}
.desc-title {
  position: relative;
  line-height: 20px;
}
.desc-title:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 10px;
  background-color: #EEDECA;
}
.desc-title span {
  position: relative;
  z-index: 1;
}
.desc-content {
  font-size: 12px;
  padding: 10px 0;
}
.desc-scroll {
  width: 100%;
  white-space: nowrap;
  overflow-x: scroll;
}
.desc-item {
  display: inline-flex;
  flex-direction: row;
  width: 80%;
  padding: 10px;
  background-color: #F7F8FA;
}
.desc-item-img {
  height: 100px;
}
.desc-item-title {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 10px;
  white-space: normal;
  word-break: normal;
  font-size: 12px;
}
.desc-item-user {
  display: flex;
  align-items: center;
}
.desc-item-name {

}
.desc-item-user-img {
  width: 20px;
  height: 20px;
  margin-right: 5px;
  border-radius: 50%;
}
.desc-pro {
  padding: 15px 0;
  font-size: 0;
}
.desc-pro-img {
  width: 100%;
}
</style>
